/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<form @submit="submitAddress" class="formbox">
				<view class="item">
					<view class="item-name">收货人姓名:</view>
					<input class="item-input" v-model="name" name="consignee" placeholder="请输入姓名" placeholder-class="placeholder">
					
					</input>
				</view>
				<view class="item">
					<view class="item-name">手机号码:</view>
					<input class="item-input" v-model="mobile" name="mobile" placeholder="请输入手机号码" placeholder-class="placeholder">
					
					</input>
				</view>
				<view @tap="openRegionsModal" class="item" data-id="0">
					<view class="item-name">所在区域:</view>
					<view class="item-input" v-if="province_name">{{province_name.name}} {{city_name.name}} {{district_name.name}}</view>
					<view class="item-input" v-else>请选择所在区域</view>
					<view class="item-img">
						<image class="arrow" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
					</view>
				</view>
				<view class="item">
					<view class="item-name">详细地址:</view>
					<input class="item-input"v-model="detailedAddress"  name="address" placeholder="请输入详细地址" placeholder-class="placeholder">
					
					</input>
				</view>
				<view class="item">
					<view class="item-name">设为默认地址</view>
					<switch class="item-switch" color="#ff3b3b" name="is_default" :checked="isDefault"  @change="changeState" type="switch" role="checkbox" ></switch>
				</view>
				<view class="address-btns">
					<button @tap="deleteAddress" class="delete-btn" role="button" aria-disabled="false">
						删除地址
						
					</button>
					<button class="submit-btn" form-type="submit" role="button" aria-disabled="false">
						提交地址
						
					</button>
				</view>
			</form>
		</view>
		<view>
			<!-- <view bindtap="closeRegionsModal" class="cover-layer"></view>
			<view class="regions"></view> -->
		</view>
		<address-list :hide="ishide" ref="child" @closeRegionsModal="close"></address-list>
	</view>
</template>

<script>
	import AddressList from "@/components/addresslist/addresslist.vue";
	import {postAddress,getAddressOne,getCity,delAddress,putAddress} from "@/api/api.js";
	import config from "@/api/config";
	export default {
		data() {
			return {
				imgUrl:config.imgUrl,
				ishide:false,//区域控件隐藏
				address:"",//区域地址
				addressId:"",//地址id
				province_name:{//省
					name:"",
					id:0,
				},
				city_name:{//市
					name:"",
					id:0
				},
				district_name:{//区
					name:"",
					id:0
				},
				name:"",//姓名
				mobile:"",//手机号码
				detailedAddress:"",//详细地址
				msg:"",
				isDefault:false,
				
			};
		},
		components:{
			AddressList
		},
		onLoad(op){
			/*是否获取到op.id 获取单个地址*/
			if(op.id){
				let addressId=op.id;
				this.addressId=addressId;
				this._getAddressOne(addressId)
			}
			
			console.log(op)
		},
		methods:{
			openRegionsModal(){
				this.ishide=true;
				this.$refs.child._getAddress(0)
			},
			submitAddress(){
				let isDefault=0;
				if(this.isDefault==false){
					isDefault=0
				}else{
					isDefault=1
				}
				let params={
					"address_id":this.addressId,
					"address":this.detailedAddress,
					"city":this.city_name.id,
					"consignee":this.name,
					"is_default":isDefault,//1 默认
					"mobile":this.mobile,
					"province":this.province_name.id,
					"district":this.district_name.id,
				}
				/*根据是否有addressId来判断是修改还是新增*/ 
				if(this.addressId){
					this._putAddress(params)
				}else{
					console.log(this.province_name.id)
					
					this._postAddress(params)
				}
			},
			/*提交地址*/
			_postAddress(params){
				postAddress(params).then(res=>{
					console.log(res)
					let title= res.msg;
					this.toast(title)
					if(res.status==1){
						
						setTimeout(this.jump, 1000)
					}
				})
			},
			/*获取单个地址*/
			_getAddressOne(addressId){
				getAddressOne(addressId).then(res=>{
					console.log(res);
					this.addressId=res.address_id;
					this.name=res.consignee;
					this.detailedAddress=res.address;
					this.mobile=res.mobile;
					
					console.log(res.is_default)
					
					if(res.is_default==1){
						this.isDefault=true
					}else{
						this.isDefault=false
					}
					/*获取单个地址的省，市，区*/ 
					let params={
						province:res.province,
						city:res.city,
						district:res.district
					}
					this._getCity(params)
					// 1this.province_name.name=
				})
			},	
			/*修改地址*/
			_putAddress(params){
				putAddress(params).then(res=>{
					if(res.status==1){
						
						setTimeout(this.jump, 1000)
					}
					console.log(res)
				})
			},
			/*监听子组件 关闭地址弹窗*/ 
			close(e){
				console.log(e)
				
				
				this.ishide=e.ishide;
				this.province_name=e.addressInfo.province_name;
				this.city_name=e.addressInfo.city_name;
				this.district_name=e.addressInfo.district_name;
				// this.address.twon_name=e.addressInfo.twon_name;
			},
			/*获取当前用地址 省，市，区*/
			_getCity(params){
				getCity(params).then(res=>{
					console.log(res)
					this.province_name.id=res[0].id;
					this.province_name.name=res[0].name;
					this.city_name.id=res[1].id;
					this.city_name.name=res[1].name;
					this.district_name.id=res[2].id;
					this.district_name.name=res[2].name;
				})
			},
			/*提示*/ 
			toast(title){
				uni.showToast({
					icon:"none",
				    title: title,
				    duration: 1000
				});
			},
			/*跳转*/ 
			jump(){
				uni.navigateBack({
					delta:1,
					
				})
			},
			/*删除*/
			deleteAddress(){
				let id=this.addressId
				this._delAddress(id)
			},
			/*删除地址*/ 
			_delAddress(id){
				delAddress(id).then(res=>{
					// console.log(res)
					let title=res.msg
					this.toast(title)
					if(res.status==1){
						
						setTimeout(this.jump, 2000)
					}
					
				})
			},
			//监听switch值
			changeState(e){
				console.log(e)
				this.isDefault=e.target.value
			}
			// 检测是否添加成功
			// detection(){
			// 	if()
			// }
		}
	}
</script>

<style lang="scss">
	page{
	    background: #f5f5f5;
	}
	.item{
	    float: left;
	    padding: 0 30rpx; 
	    width: 100%;
	    box-sizing: border-box;
	    font-size: 26rpx;
	    border-bottom: 1rpx solid #f3f3f3;
	    line-height: 100rpx;
	    height: 100rpx;
	    position: relative;
	    color: #999;
	}
	.item-name{
	    float: left;
	}
	.item-input{
	    float: left;
	    height: 100rpx;
	    width: 450rpx;
	    margin-left: 20rpx;
	    word-break: keep-all;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    color: #999;
	}
	.item-switch{
	    float: right;
	}
	.arrow{
	    position: absolute;
	    right: 30rpx;
	    width: 32rpx;
	    height: 32rpx;
	    padding-top: 30rpx;
	}
	.address-btns{
	    position: absolute;
	    bottom: 80rpx;
	    float: left;
	    width: 100%;
	    padding: 10rpx 0;
	}
	.delete-btn{
	    float: left;
	    width: 40%;
	    margin:0 10% 0 5%;
	     border-radius: 10rpx; 
	    color: #999;
	    border:1px solid #f3f3f3;
	    background: #fff;
	}
	.submit-btn{
	    float: left;
	    width: 40%;
	    background-color: #e30000;
	    color: white;
	    border-radius: 10rpx;
	}
	.formbox{
	  width: 710rpx;
	  background: #fff;
	  border-radius: 10rpx;
	  overflow: hidden;
	  margin: 0 auto;
	  box-sizing: border-box;
	  margin-top: 20rpx;
	}
	.placeholder{
	  color: #999;
	}
</style>
